import React from 'react';
import {Modal, View, Text, findNodeHandle, UIManager,TouchableOpacity} from 'react-native';

export default class TitleModal extends React.Component {

  state = {
    modalShow: false,
    modalPosition: {},
  }

  openModal = () => {
    if (!this.btnRef) return;

    const handle = findNodeHandle(this.btnRef);

    UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
      this.setState({
        modalShow: true,
        modalPosition: {
          x, y, width, height, pageX, pageY
        }
      });
    });
  }

  addRef = (ref) => {
    this.btnRef = ref
  }

  closeModal = () => {
    this.setState({
      modalShow: false,
    });
  }

  render() {

    const {modalShow, modalPosition} = this.state;

    return (
      <View>
        <Text
          onPress={this.openModal}
          ref={this.addRef}
        >···</Text>

        <Modal
          visible={modalShow}
          onRequestClose={this.closeModal}
          transparent={true}
        >
          <View
            onStartShouldSetResponder={() => true}
            onResponderRelease={this.closeModal}
            style={{
              flex: 1,
              backgroundColor: 'rgba(0,0,0,0.5)',
            }}
          >
            <View style={{
              width: 40,
              backgroundColor: '#fff',
              marginTop: modalPosition.pageY + modalPosition.height,
              marginLeft: modalPosition.pageX,
            }}
            >
              <TouchableOpacity
                onPress={()=>{
                  alert('fenxiang')
                }}
              >
                <Text>分享</Text>
              </TouchableOpacity>

              <Text>消息</Text>
              <Text>其他</Text>
            </View>
          </View>
        </Modal>
      </View>
    )
  }
}
